<template>
<!-- 我的预约 -->
    <div class="Lo_myorder">
        <main class="Lo_myorder_main">
            <section class="Lo_myorder_section01">
                <p><img src="../../../static/imgs/Lo_myorder_img01.png"/></p>
                <p>当前没有新的预约</p>
                <p class="myorder_btn"  @click="myorder_btn">立即预约</p>
            </section>
        </main>

    </div>
</template>
<script >
     export default {
        name:'index',
        methods:{
          morder_to_back:function(){
              this.$router.go(-1)
          },
           myorder_btn:function(){
              	 this.$router.push({path:"/"})
          }
       }
    }

</script>
<style scoped lang='less'>
.PxToRem(@name, @px){
@{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}

.active{
    color: #26c8a7;
    border-bottom: 5px solid #26c8a7; 
}
.Lo_myorder_header{
    .PxToRem(height,88);
    .PxToRem(font-size,28);
    .Flex;
    justify-content: space-between;
    align-items: center;
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    position: fixed;
    padding-left: 2%;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    p:nth-child(1){
        flex: 1;
        img{
            .PxToRem(width,55);
            .PxToRem(height,53);
        }
    }
    p:nth-child(2){
        flex: 6;
        .PxToRem(font-size,35);
    }
    p:nth-child(3){
        flex: 1;
    }
}
.Lo_myorder_nav01{
     background: #fff;
     .PxToRem(padding-top,88);
     ul{
         .Flex;
         .PxToRem(line-height,145);
         text-align: center;
         justify-content: space-around;
         .PxToRem(height,145);
         .PxToRem(font-size,38);
         li:nth-child(1){
            .PxToRem(width,270);
            .PxToRem(height,145);
         }
         li:nth-child(2){
            .PxToRem(width,270);
            .PxToRem(height,145);
         }
         li:nth-child(3){
            .PxToRem(width,270);
            .PxToRem(height,145);
         }
         li:nth-child(4){
            .PxToRem(width,270);
            .PxToRem(height,145);
         }
     }
}
/*背景色*/
html,body{
    width:100%;
    height: 100%;
    background: #f0f2f5;
}
.Lo_myorder_main{
    
   .PxToRem(margin-top,7);
   .Flex;
   justify-content: center;
   text-align: center;
   .Lo_myorder_section01{
       p:nth-child(1){
           .PxToRem(margin-top,280); 
           img{
               .PxToRem(width,200);
               .PxToRem(height,200);
           }
       }
       p:nth-child(2){
           .PxToRem(margin-top,55); 
           .PxToRem(margin-bottom,70); 
           color: #999999;
           .PxToRem(font-size,40);
       }
       p:nth-child(3){
           color: #1cc6a3;
           .PxToRem(width,400);
           .PxToRem(height,100);
           .PxToRem(font-size,46);
           .PxToRem(line-height,100);
           .PxToRem(border-radius,135);
           border: 3px solid #1cc6a3;
           
            
       }
   }

}
</style>



